import { Select, Input } from "antd";
import { ComponentEvent } from "../../../editor/stores/component-config";
import { useComponentStore } from "../../../editor/stores/components";
import TextArea from "antd/es/input/TextArea";
import { useState, useEffect } from "react";

export interface ShowMessageConfig {
    type: 'showMessage'
    config: {
        type: 'success' | 'error',
        text: string
    }
}
export interface ShowMessageProps {
    value?: ShowMessageConfig['config'],
    defaultValue?: ShowMessageConfig['config'],
    onChange?: (config: ShowMessageConfig) => void
}

// 接收 ShowMessageProps, 返回 ShowMessageConfig
export function ShowMessage(props: ShowMessageProps){
    const { value: val, defaultValue, onChange } = props

    const { curComponentId } = useComponentStore()
    const [type, setType] = useState<ShowMessageConfig['config']['type']>(defaultValue?.type || 'success')
    const [text, setText] = useState<string>(defaultValue?.text || '')

    useEffect(() => {
        if (val) {
            setType(val?.type)
            setText(val?.text)
        }
    }, [val])

    function handleMessageTypeChange(value){
        if (!curComponentId) return 

        setType(value)

        onChange && onChange({
            type: 'showMessage',
            config: {
                type: value,
                text
            }
        })
    }

    function handleMessageTextChange(value){
        if (!curComponentId) return 

        setText(value)

        onChange && onChange({
            type: 'showMessage',
            config: {
                type,
                text: value
            }
        })
    }

    return (
        <div className="mt-[10px]">
            <div className="flex item-center gap-[10px]">
                <div>类型：</div>
                <div>
                    <Select
                        style={{ width: 500, height: 50 }}
                        options={[
                            {label: '成功', value: 'success'},
                            {label: '失败', value: 'error'},
                        ]}
                        onChange={(value) => handleMessageTypeChange(value)}
                        value={type}
                    />
                </div>
            </div>
            <div className="flex items-center gap-[10px] mt-[10px]">
                <div>文本：</div>
                <div>
                    <TextArea 
                        style={{ width: 500, height: 50 }}
                        onChange={(e) => handleMessageTextChange(e.target.value)}
                        value={text}
                    />
                </div>
            </div>
        </div>
    )
}